BuyCoin Documentation

Hello! Thank you for purchasing!

Created: 16/12/2017 By: Dmitry Volkov Email: dmitry.volkov.vetrov@gmail.com

Getting Started

Unzip the archive and find out the folder www. There are all the template files in this folder. You can open the following files for viewing in browser.

  • /css — folder with css files.
  • /fonts — folder with icon fonts.
  • /icon — folder with favicons.
  • /img — folder with image files.
  • /js — folder with javascript files.

  • index1.html — landing page style 1.
  • index2.html — landing page style 2.
  • index3.html — landing page style 3.
  • index4.html — landing page style 4.

Upload the template files (inside the folder www) to server with the help of one of the FTP-clients.

HTML structure

In my theme I use Bootstrap grid, if you don't know how to use it, here is a detailed information on its use.

The standard section has the following HTML structure:

<section class="section">
  <div class="container">
    <div class="row">

      <div class="col-xs-12">
        <h2 class="section__title">BuyCoin Template</h2>
        <span class="section__tagline">Excellent for your business</span>
      </div>

      <div class="col-xs-12 col-sm-6 col-md-4">
        <div class="box2">
          <span class="lnr lnr-diamond box2__icon"></span>
          <h3 class="box2__title">Modern Design</h3>
          <p class="box2__text">If you are going to use a passage of Lorem Ipsum.</p>
        </div>
      </div>

    </div>
  </div>
</section>

Home

Slider

To change the slider image, open HTML file and replace the value of data-bg attribute of this construction:

<section id="home" class="home">
  <div class="owl-carousel home__slider">
    <div class="item" data-bg="img/home/slide.jpg"></div>
    ...
  </div>
</section>

Parallax

To change the background image, open HTML file and replace the value of data-image-src attribute of this construction:

<section id="home" class="home" data-parallax="scroll" data-image-src="img/home/slide.jpg">
  <div class="container">
    ...
  </div>
</section>

Static

To change the background image, open HTML file and replace the value of data-bg attribute of this construction:

<section id="home" class="home section--bg" data-bg="img/home/slide.jpg">
  <div class="container">
    ...
  </div>
</section>

About

To change section style, open HTML file and replace modification class on any of the following:

  • about--wave
  • about--arrow
  • about--angle
  • about--angle2

For example the about section with "arrow" style:

<section id="about" class="about about--arrow section--gradient">
  <div class="container">
    ...
  </div>
</section>

Sections

By default section have white background color, but you may change style:

section--grey – grey background color

<section class="section section--grey">
  <div class="container">
    ...
  </div>
</section>

section--gradient – gradient background

<section class="section section--gradient">
  <div class="container">
    ...
  </div>
</section>

section--pt0 – section without an upper indent

<section class="section section--pt0">
  <div class="container">
    ...
  </div>
</section>	

section--bg – section with static background image

<section class="section section--bg" data-bg="img/section-bg/section-bg1.jpg">
  <div class="container">
    ...
  </div>
</section>

section with parallax image

<section class="section" data-src="img/section-bg/section-bg1.jpg" data-parallax>
  <div class="container">
    ...
  </div>
</section>

Color Scheme

To change color scheme, open HTML file and replace the value of href attribute

<link rel="stylesheet" href="css/main-color1.css">

on any available (main-color1, main-color2, main-color3, main-color4, main-color5 or main-color6).

Animation

If you want to use appear inimation for some element, you need to add class animate to this element and set data attribute like this:

<div class="col-xs-12 animate" data-animate="fadeIn" data-duration="1.0s" data-delay="0.5s">
  ...
</div>

The full list of appear animation effects you can find here – Animate CSS

Support

If you have any questions, feel free to contact me at dmitry.volkov.vetrov@gmail.com.